<!DOCTYPE html>
<html>

<head>
<title>Cindy JS Example</title>
<meta charset="UTF-8">
<script type="text/javascript" src="../../build/js/Cindy.js"></script>
<script type="text/javascript" src="../../build/js/CindyGL.js"></script>
<script id="csinit" type="text/x-cindyscript">
N = 256;

image = "image";

createimage("x", N, N);

encodealpha = 8;
encodedelta = .5+.5*i;

complex2color(c) := (
  c = c/encodealpha+encodedelta;
  (re(c), im(c), re(c)) //last 2 components are actually rubbish
);

readcomplex(p) := (
  color = imagergba((-N/2,-N/2),(N/2,-N/2), "x", p, interpolate->false, repeat->true); //circular domain
  encodealpha*(color.x + i*color.y-encodedelta);
);


reloadimage() := (
  if (!isundefined(image) & imageready(image),
  colorplot((0,0),(256,0),"x",
      imagergb((0,0),(256,0),image,#,repeat->true)*(1,1,1)/3 //grayscale image 
      -exp(-|#, A|/15)//we want to see some real time user interaction :)
  ),
  colorplot((0,0),(256,0),"x",
    1-exp(-|#, A|/15)
  )
  );
);

FFT(interaction):=(
  step = N/2;

  while(step>=1,
    colorplot((-N/2,-N/2),(N/2,-N/2),"x",
    
      l = #; //global index
      delta = (mod(l.x,step),mod(l.y,step)); //shift
      k = (l-delta)/step; //local index (within recursion)
      x00 = readcomplex(2*l - delta + (0,0));
      x10 = readcomplex(2*l - delta + (step,0));
      x01 = readcomplex(2*l - delta + (0,step));
      x11 = readcomplex(2*l - delta + (step,step));
      
      complex2color(sqrt(1/4)*(
        x00
        + exp((-2*pi*i/N*step)*k.x)*x10
        + exp((-2*pi*i/N*step)*k.y)*x01
        + exp((-2*pi*i/N*step)*(k.x+k.y))*x11
        )
      )*if(step~=1 & interaction , 1-exp(-|A,#+(256+128,128)|/30), 1) //we want to see some real time user interaction :) 
    );
    
    step = step/2;
  );
);

</script>
<script id="csdraw" type="text/x-cindyscript">

reloadimage();

drawimage((0,0), (256,0),"x");
FFT(true);

drawimage((256,0), (512,0),"x");
FFT(false);

drawimage((512,0), (768,0),"x");
</script>

<script id="csondrop" type="text/x-cindyscript">
  dropped = dropped();
  dump(dropped);
  if (!isundefined(dropped_1_1), image = dropped_1_1; reloadimage();
  ; dump(image););
  
  
</script>

<script type="text/javascript">

var cdy = CindyJS({
  ports: [{id: "CSCanvas", transform: [{visibleRect: [0, 0, 768, 256]}]}],
  scripts: "cs*",
  language: "en",
  images: {image:"image.png"},
  geometry: [
    {name:"A", type:"Free", pos:[50,175]}
  ],
  use: ["CindyGL"]
});

</script>



</head>

<body style="font-family:Arial;">
  <h1>CindyJS: 2 dimensional FFT by iterating a texture operation</h1>
  Drag and drop an image into this area. Each image is generated by a FFT of the image on its left.

  <div id="CSCanvas" style="width:768px; height:256px; border:2px solid black"></div>
</body>


</html>
